<template>
    <el-dropdown class="fs16">
        <span class="el-dropdown-link">
            {{ dropdownList[dropIndex].title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in dropdownList" @click="changeDropList(index)"
                    :disabled="index == 0 ? false : true">{{ item.title
                    }}</el-dropdown-item>
            </el-dropdown-menu>
        </template>
    </el-dropdown>
</template>

<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from 'vue';
const dropIndex: any = ref(0)
const dropdownList = [
    { title: '云扬科技（汕头）' },
    { title: '连宇科技（汕头）' },
    { title: '同班科技（广州）' },
    { title: '盛冉科技（广州）' },
    { title: '佳投智慧（深圳）' },
    { title: '星扬科技（梅州）' },
]
const changeDropList = (i: Number) => {
    dropIndex.value = i
}
</script>
<style lang="scss">
.el-dropdown {
    color: #2D71F6 !important;
    cursor: pointer;
    font-weight: bold;
    line-height: 38px;
    letter-spacing: 1px;

}

.el-dropdown-item {
    color: #FFFFFF !important;


    &:hover {
        border: none !important;
    }
}

.el-dropdown-menu {
    background-color: rgba(9, 25, 57, 0.80) !important;
    border: 1px solid #00487f !important;
    border-radius: 1px solid;

}

:focus-visible {
    outline: none;
}

.el-popper[x-placement^=bottom] {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
}

.el-dropdown-menu__item:not(:last-of-type) {
    border-bottom: 1px solid #00487f;
}

/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow {
    border: none;
}

.el-dropdown-menu__item:not(.is-disabled) {
    color: #FFFFFF;
}

.el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: rgba(9, 25, 57, 0.80) !important;
    color: #FFFFFF;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border: none;
}

.el-dropdown__popper.el-popper {
    border: none;
}
</style>
